<template>
    <div class="order_form">
        <div class="order_head">
            <ol class="order_nav f30">
                <li v-for="(item, key) in (type == 3?orderNav:answer)" :key="key" @click="tab(item.state, item.type)" :class="(keys == item.state) ? 'on' : ''">{{item.name}}</li>
            </ol>
        </div>
        <div class="order_conten">
            <div class="order_conten_list" v-for="(item, key) in orderList" :key="key" >
                <dai-payment :item="item" v-if="type == '3'"></dai-payment>
                <question :item="item" v-if="type == '1,2'"></question>
            </div>
            <blank v-if="isblank" :title="'暂无此类订单'"></blank>
        </div>
        <div class="cancel" v-if="ifcancel">
            <div class="cancel_confirm">
                <h3 class="f28">确定{{delType == 1 ? '取消' : '删除'}}订单?</h3>
                <div class="cancel_confir_mbtn">
                    <span class="f28" @click="qvxiaoorder">取消</span>
                    <span class="f28 blue" @click="cancelOrder()">确定</span>
                </div>
            </div>
        </div>
        <div v-if="orderList.length" class="gengduo" @click="gengduo">{{jiaMsg}}</div>
    </div>
</template>

<script>
    import daiPayment from '@/components/daiPayment'
    import question from '@/components/question'
    import Bus from '@/bus/bus.js'
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'orderForm',
        components: {
            daiPayment,
            question,
            blank
        },
        data() {
            return {
                ifcancel: false,
                isblank: false,
                orderNav: [
                    {
                        name: '待付款',
                        state: '1',
                        type: '1'
                    },{
                        name: '进行中',
                        state: '3',
                        type: '3'
                    },{
                        name: '待评价',
                        state: '4',
                        type: '3'
                    },{
                        name: '全部',
                        state: '0',
                        type: ''
                    }
                ],
                answer: [
                    {
                        name: '待回复',
                        state: '8',
                        type: '1,2'
                    },{
                        name: '已完成',
                        state: '5',
                        type: '1,2'
                    },{
                        name: '已取消',
                        state: '9',
                        type: '1,2'
                    },{
                        name: '全部',
                        state: '0',
                        type: '1,2'
                    }
                ],
                orderList: [],
                type: this.$route.query.type,
                keys: this.$route.query.key,
                ind: 0,
                delorderId: '',
                delType: '',
                offset: 0,
                limit: 10,
                jiaMsg: '加载更多'
            }
        },
        methods: {
            qvxiaoorder() {
                this.ifcancel = false;
            },
            gengduo(){
                this.offset += this.limit;
                this.userConsultanceList(this.$route.query.key)
            },
            userConsultanceList(s) { // 获取用户的订单列表
                this.keys = s;
                let params = {
                    userId: this.$store.state.userId,
                    questionType: this.$route.query.type,
                    status: s ? s : this.$route.query.key,
                    offset: this.offset,
                    limit: this.limit,
                }
                this.$http.fetchGet('userConsultanceList', params).then(res => {
                    if(res.code == 200) {
                        if(this.offset == 0) this.orderList = res.data;
                        else this.orderList.push(...res.data);
                        if(res.data.length == 0) this.offset -= this.limit;
                        if(this.orderList.length <= 0) {
                            this.isblank = true
                        } else {
                            this.isblank = false
                        }
                        if(res.data.length == 0) {
                            this.offset = 0
                            // this.$vux.toast.text('没有更多订单')
                            this.jiaMsg = '加载完毕'
                        }
                    } else {
                        // this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            tab(s, t) {
                this.offset = 0
                this.userConsultanceList(s)
            },
            cancelServiceOrder() { // 取消订单
                let params = {
                    userId: this.$store.state.userId,
                    serviceOrderId: this.delorderId
                }
                this.$http.fetchGet('cancelServiceOrder', params).then(res => {
                    if(res.code == 200){
                        this.$vux.toast.text('订单已取消')
                        this.ifcancel = false
                        this.userConsultanceList(this.$route.query.key)
                    } else {
                        // this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            cancelOrder() {
                if(this.delType == 1) {
                    this.cancelServiceOrder()
                }
            },
        }, 
        mounted() {
            this.userConsultanceList(this.$route.query.key)
            Bus.$on('delOrder', (e) => {
                this.ifcancel = e.bool;
                this.delorderId = e.id;
                this.delType = e.type;
            })
        }
    }
</script>

<style lang="less" scoped>
    .order_form{
        position: absolute;
        top: 0;
        bottom: 0;
        box-sizing: border-box;
        background: #f2f2f2;
        width: 100%;
        .pt(88);
        .order_head{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            .order_nav{
                display: flex;
                border-bottom: 1px solid #f2f2f2;
                box-sizing: border-box;
                background: #fff;
                li{
                    flex: 1;
                    .h(88);
                    .lh(88);
                    text-align: center;
                    color: #333;
                    box-sizing: border-box;
                }
                .on{
                    color: #189BEB;
                    border-bottom: 2px solid #189BEB;
                }
            }
        }
        .cancel{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .cancel_confirm{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(620);
                .h(290);
                background: #fff;
                border-radius: 5px;
                h3{
                    text-align: center;
                    .lh(80);
                    .pt(40);
                    color: #666;
                    font-weight: normal;
                }
                p{
                    text-align: center;
                    .lh(60);
                    color: #666;
                }
                .cancel_confir_mbtn{
                    width: 100%;
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        color: #333;
                        &:last-child{
                            border-left: 1px solid #f2f2f2;
                        }
                    }
                    .blue{
                        color: #189BEB;
                    }
                }
            }
        }
        .gengduo{
            text-align: center;
            .lh(88);
            color: #189BEB;
        }
    }
</style>
